<template>
  <div @click="goArticlePage(id)">
    <van-cell
      title-class="title"
      :title="title"
      :label="`${author} ${commentCount}评论 ${getTime()}`"
    >
      <template v-if="images.length === 1" #title>
        <div class="wrapper">
          <span>{{ title }}</span>
          <div class="image">
            <img :src="images[0]" alt="" />
          </div>
        </div>
      </template>
      <template v-else #title>
        <span>{{ title }}</span>
        <div class="images-container">
          <div class="image" v-for="(image, index) in images" :key="index">
            <img :src="image" alt="" />
          </div>
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: {
    title: String,
    author: String,
    commentCount: Number,
    timestamp: String,
    id: Number,
    images: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    getTime() {
      return moment(this.timestamp).toNow(true) + "内";
    },
    // 去文章列表页面
    goArticlePage(id) {
      this.$router.push({
        path: "/article-page",
        query: {
          id,
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  width: 100%;
  padding: 0;
  .image {
    overflow: hidden;
    border-radius: 4px;
    height: 72px;
    img {
      width: 100%;
      height: 100px;
      object-fit: cover;
    }
  }
}
.wrapper {
  width: 100%;
  display: grid;
  // 布局
  grid-template-columns: 2fr 1fr;
  // 间隙大小
  grid-gap: 16px;
}
.images-container {
  width: 100%;
  display: grid;
  // 布局
  grid-template-columns: 1fr 1fr 1fr;
  // 间隙大小
  grid-gap: 8px;
}
</style>